
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="description" content="Selectivity.js : Modular and light-weight selection library">
	<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
    <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/selectivity-jquery.css">

    <title>我就测试下哦,我是线上测试的</title>
</head>

<body>

    <!-- HEADER -->
    <div id="header_wrap" class="outer">
        <header class="inner">
            <h1 id="project_title">Selectivity.js</h1>
            <h2 id="project_tagline">Modular and light-weight selection library</h2>

        </header>
    </div>

    <!-- MAIN CONTENT -->
    <div id="main_content_wrap" class="outer">
        <section id="main_content" class="inner">

            <h1>Benefits</h1>

            <ul>
                <li><b>Rich UI.</b> Select boxes made by Selectivity have rich functionality, work out of the box and are customizable.</li>
                <li><b>Modular.</b> Selectivity's modular approach is aimed to make it easy to create custom builds with just
                    the features that you care about and to easily swap modules for custom ones.</li>
                <li><b>Light-weight.</b> Selectivity.js is smaller than comparable selection libraries, even if you're using
                    a build with all features packed in.</li>
                <li><b>Compatibility.</b> Selectivity.js can be used without any external libraries, but also offers a jQuery
                    build that is compatible with both jQuery (including custom builds without Sizzle) and Zepto.js, and
                    a build that is compatible with React. It's your choice how you want to use it.</li>
            </ul>

            <h1>
                <a id="examples" class="anchor" href="#examples" aria-hidden="true"></a>Examples</h1>

            <h2>
                <a id="select-a-single-city" class="anchor" href="#select-a-single-city" aria-hidden="true"></a>Select a
                single city</h2>

            <p></p>

            <div id="example-1" class="selectivity-input example-input"></div>

            <div class="code-block">
                <pre class="example-code react">
<code>&lt;<span class="tag">Selectivity.React</span>
    <span class="attribute">allowClear</span>={true}
    <span class="attribute">items</span>={[<span class="string">'Amsterdam'</span>, <span class="string">'Antwerp'</span><span class="comment">/*, ...*/</span>]}
    <span class="attribute">placeholder</span>=<span class="string">'No city selected'</span>
/&gt;</code>
    </pre>
                <pre class="example-code jquery active">
<code>$(<span class="string">'#example-1'</span>).selectivity({
    allowClear: true,
    items: [<span class="string">'Amsterdam'</span>, <span class="string">'Antwerp'</span><span class="comment">/*, ...*/</span>],
    placeholder: <span class="string">'No city selected'</span>
});</code>
    </pre>
                <div class="handles-container">
                    <div class="handles">
                        <div class="handle react">React</div>
                        <div class="handle jquery active">jQuery</div>
                    </div>
                </div>
            </div>

            <h2>
                <a id="select-multiple-cities" class="anchor" href="#select-multiple-cities" aria-hidden="true"></a>Select
                multiple cities</h2>

            <p></p>

            <div id="example-2" class="selectivity-input example-input"></div>

            <div class="code-block">
                <pre class="example-code react">
<code>&lt;<span class="tag">Selectivity.React</span>
    <span class="attribute">items</span>={[<span class="string">'Amsterdam'</span>, <span class="string">'Antwerp'</span><span class="comment">/*, ...*/</span>]}
    <span class="attribute">multiple</span>={true}
    <span class="attribute">placeholder</span>=<span class="string">'Type to search a city'</span>
/&gt;</code>
    </pre>
                <pre class="example-code jquery active">
<code>$(<span class="string">'#example-2'</span>).selectivity({
    items: [<span class="string">'Amsterdam'</span>, <span class="string">'Antwerp'</span><span class="comment">/*, ...*/</span>],
    multiple: true,
    placeholder: <span class="string">'Type to search a city'</span>
});
</code>
    </pre>
                <div class="handles-container">
                    <div class="handles">
                        <div class="handle react">React</div>
                        <div class="handle jquery active">jQuery</div>
                    </div>
                </div>
            </div>

            <h2>
                <a id="select-a-city-by-country" class="anchor" href="#select-a-city-by-country" aria-hidden="true"></a>Select
                a city by country</h2>

            <p></p>

            <div id="example-3" class="selectivity-input example-input"></div>

            <div class="code-block">
                <pre class="example-code react">
<code>&lt;<span class="tag">Selectivity.React</span>
    <span class="attribute">allowClear</span>={true}
    <span class="attribute">items</span>={[{
        text: <span class="string">'Austria'</span>,
        children: [ { id: 54, text: <span class="string">'Vienna'</span> } ]
    } <span class="comment">/*, ...*/</span>]}
    <span class="attribute">placeholder</span>=<span class="string">'No city selected'</span>
/&gt;</code>
    </pre>

    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="javascripts/selectivity-jquery.js"></script>
    <script src="javascripts/main.js"></script>
</body>
<!--
    校园情报站
    一、主要包含功能：
    1、二手交易：可交易除了活物外的任何东西
    2、拜托帮忙：可有偿、免费帮助有须要的同学
    3、情报处：有关学校的人或事
    4、有偿跑腿

    二、五大菜单
    1、首页
    2、二手交易
    3、拜托帮忙，包含跑腿
    4、情报处
    5、个人中心
-->
</html>
